<!-- 个人收藏 -->
<template>
  <div class="editor-business-page">
    <div class="search">
      <div class="btns">
        <el-input
          clearable
          v-model="keyword"
          placeholder="请输入关键字"
          style="width: 300px"
          maxlength="100"
          size="small"
          @keyup.enter.native="getList"
        />
        <el-button class="search-btn" type="primary" size="small" @click="getList">搜索</el-button>
        <el-button type="primary" plain size="small" @click="resetQuery">重置</el-button>
      </div>
    </div>
    <div class="content">
      <el-tabs v-model="classifyId" type="card">
        <el-tab-pane name="-1" label="全部" />
        <el-tab-pane
          v-for="(item, index) in classifyList"
          :key="item.id + '' + index"
          :name="item.id + ''"
          :label="item.name"
        />
      </el-tabs>
      <div class="list-wrapper">
        <el-table :data="dataList" v-loading="loading" style="width: 100%">
          <el-table-column label="序号" type="index" width="50" :index="indexMethod"/>
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="description" label="描述" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="handleEdit(scope.row)"
                >编辑信息</el-button
              >
              <el-button type="text" size="mini" @click="handleEditContent(scope.row)"
                >编辑正文</el-button
              >
              <el-button type="text" size="mini" @click="handleDelete(scope.row)"
                >删除</el-button
              >
          </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        class="business-pager p20 fr"
        v-show="dataTotal > 0"
        :background="true"
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        :layout="'total, sizes, prev, pager, next, jumper'"
        :page-sizes="[10, 30, 50, 100]"
        :pager-count="7"
        :total="dataTotal"
        @size-change="handleSizeChange"
        @current-change="handlepageNumChange"
      />
    </div>
    <CollectionEditModal
      :visible.sync="editModalShow"
      :editData="editData"
      @onClose="onCloseDialog"
      @onSuccess="onSuccess"
      :classifyList="classifyList"
    />
  </div>
</template>
<script>
import CollectionEditModal from '@/views/editor/__components__/CollectionEditModal.vue'
import { getFavouriteClassifyList, getFavouriteList, deleteFavouriteItem } from '@/api/business'
import { Message, MessageBox } from 'element-ui'
export default {
  components: { CollectionEditModal },
  data() {
    return {
      loading: false,
      keyword: '',
      classifyList: [],
      classifyId: '-1',
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      dataTotal: 0,
      dataList: [],
      editData: null,
      editModalShow: false
    }
  },
  mounted() {
    this.getClassifyList()
    this.handleQuery()
  },
  watch: {
    classifyId() {
      this.handleQuery()
    }
  },
  methods: {
    indexMethod(index) {
      return (
        (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
      );
    },
    async getClassifyList() {
      const res = await getFavouriteClassifyList({})
      if (res.data?.length) {
        this.classifyList = res.data
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.dataList = []
      this.dataTotal = 0
      this.getList()
    },
    async getList() {
      this.loading = true
      getFavouriteList({
        ...this.queryParams,
        classifyId: this.classifyId !== '-1' ? Number(this.classifyId) : undefined,
        keyword: this.keyword
      })
        .then((res) => {
          this.dataList = res.data.list
          this.dataTotal = res.data.count
        })
        .finally(() => {
          this.loading = false
        })
    },
    resetQuery() {
      this.keyword = ''
      this.handleQuery()
    },
    handleSizeChange(val) {
      if (this.queryParams.pageSize * val > this.dataTotal) {
        this.queryParams.pageNum = 1
      }
      this.getList()
    },
    handlepageNumChange() {
      this.getList()
    },
    handleEdit(_data) {
      this.editData = _data
      this.editModalShow = true
    },
    handleEditContent(item) {
      window.open(`/editor/view?id=${item.id}&editContentType=collect`, '_blank')
    },
    handleDelete(item) {
      MessageBox.confirm(`确认删除收藏"${item.name}"吗？删除后不可恢复`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'business-dialog',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            deleteFavouriteItem(item.id)
              .then((res) => {
                Message.success('删除成功')
                this.handleQuery()
              })
              .finally(() => {
                instance.confirmButtonLoading = false
                done()
              })
          } else {
            done()
          }
        }
      })
        .then(() => {})
        .catch((err) => {
          console.log(err)
        })
    },
    onCloseDialog() {
      this.editData = null
    },
    onSuccess() {
      this.editData = {}
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/editor.scss";
.content {
  padding: 24px;
}
.content .controls {
  margin-bottom: 24px;
}
.list-content {
  flex: 1;
}
.list-content .icon {
  min-height: 30px;
  height: 30px !important;
}
.info-btns {
  font-size: 12px;
  line-height: 26px;
  color: #666;
  display: flex;
  align-items: center;
}
.info-btns .separator {
  display: block;
  margin: 0 12px;
  width: 1px;
  height: 12px;
  border-left: 1px solid #ddd;
}
.list-info {
  flex-grow: 1;
  margin-right: 20px;
}
.blank {
  min-height: 100px;
  height: 100%;
}
</style>
